<template>
  <div class="work_beacn_wrapper">
    <el-row :gutter="40">
      <el-col :span="12">
        <el-card>
          <div class="demo-basic--circle user_basic_info">
            <div class="block item_avatar">
              <el-avatar
                shape="square"
                :size="100"
                :src="require('@/assets/pen.png')"
              ></el-avatar>
            </div>
            <div class="item_name">
              <span>{{ loginUser.username }}</span>
            </div>
            <!-- <span>大吉</span> -->
          </div>
          <el-divider></el-divider>

          <div class="user_position">
            <div
              class="item_position"
              v-for="item in loginUser.roles"
              :key="item.id"
            >
              <span>{{ item.name }}</span>
            </div>
            <div class="item_group">
              <span>科室：{{ officeIdToName }}</span>
            </div>
            <div class="item_mail">
              <span>邮箱号：{{ loginUser.mail}}</span>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="work_state"></div>
        </el-card>

        <!-- <el-divider>项目概览</el-divider>
        <el-card>
          <div id="myChart" style="height: 400px"></div>
        </el-card> -->
      </el-col>
      <el-col :span="24">
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane label="我负责的策划" name="planning"></el-tab-pane>
          <el-tab-pane label="我上传的文件" name="file"></el-tab-pane>
          <keep-alive>
            <component :is="isComponent"></component>
          </keep-alive>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import planningList from "./components/planningList.vue";
import fileList from "./components/fileList.vue";
import store from "../../store";
export default {
  components: { planningList, fileList },
  data() {
    return {
      activeName: "planning",
      loginUser: store.getters.loginUser.data,
      offices: store.getters.offices,
      componentsList: {
        planning: "planningList",
        file: "fileList",
      },
    };
  },
  mounted() {
    // this.drawLine();
    console.log("工作台data:", this);
  },
  methods: {
    // drawLine() {
    //   let myChart = this.$echarts.init(document.getElementById("myChart"));
    //   var option = {
    //     title: {
    //       text: "产品策划统计",
    //       subtext: "总数" + 600,
    //       left: "center",
    //     },
    //     tooltip: {
    //       trigger: "item",
    //     },
    //     series: [
    //       {
    //         name: "项目统计",
    //         type: "pie",
    //         radius: "50%",
    //         data: [
    //           { value: 100, name: "未完成" },
    //           { value: 300, name: "已完成" },
    //           { value: 200, name: "停止" },
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: "rgba(0, 0, 0, 0.5)",
    //           },
    //         },
    //       },
    //     ],
    //   };
    //   myChart.setOption(option);
    // },
  },
  computed: {
    isComponent() {
      return this.componentsList[this.activeName];
    },
    officeIdToName() {
      for (let i = 0; i < this.offices.length; i++) {
        console.log("s", this.offices[i].id);
        if (this.loginUser.office == this.offices[i].id) {
          return this.offices[i].name;
        }
      }
      return "暂无";
    },
  },
};
</script>

<style scoped>
.work_beacn_wrapper {
  margin-top: 40px;
}
.item_name {
  margin-top: 4px;
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 4px;
}
.item_state {
  font: 0.8em sans-serif;
}
.user_position {
  text-align: left;
  margin-left: 20px;
}
.user_position span {
  font-size: 14px;
  color: gray;
}
</style>